<template>
  <div class="tp">
    <Header />

    <Content>
      <div class="cp">
        <div class="card">
          <BasicTable @register="registerTable" :resizeHeightOffset="44" />
        </div>
      </div>
    </Content>
  </div>
</template>

<script setup>
  import { defineOptions, h } from 'vue';

  import { BasicTable, useTable } from '@/components/Table';

  import Header from '@/widget/header.vue';
  import Content from '@/widget/content.vue';
  import { PAGE } from '@/api/http';
  import { getLabel, moveTypeCodeList2 } from '@/api/ds';
  import ProImgCell from '@/widget/pro-img-cell.vue';

  defineOptions({ name: 'StockDeposit' });

  const [registerTable] = useTable({
    api: PAGE('/product/depositOrUseList'),
    immediate: false,

    beforeFetch: (arg) => {
      arg.stockType = 'S';
      return arg;
    },
    formConfig: {
      baseColProps: { style: { paddingRight: '12px' } },
      actionColOptions: { span: 9 },
      schemas: [
        {
          field: 'goodsName',
          component: 'Input',
          componentProps: {
            placeholder: ' 输入商品名称搜索',
          },
          colProps: { span: 5 },
        },

        {
          field: 'ownerName',
          component: 'Input',
          componentProps: {
            placeholder: ' 输入客户姓名搜索',
          },
          colProps: { span: 5 },
        },

        {
          field: 'moveTypeCode',
          component: 'Select',
          componentProps: {
            placeholder: '寄存类型',
            options: moveTypeCodeList2,
          },
          colProps: { span: 5 },
        },
      ],
    },
    columns: [
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        ellipsis: false,
        width: 290,
        customRender: ({ value: title, record }) =>
          h(ProImgCell, { src: record.goodsImage, title }),
      },

      {
        title: '客户姓名',
        dataIndex: 'ownerName',
        ellipsis: false,
      },

      {
        title: '寄存类型',
        dataIndex: 'moveTypeCode',
        ellipsis: false,
        customRender: ({ value }) => getLabel(moveTypeCodeList2, value),
      },

      {
        title: '数量',
        dataIndex: 'stockQty',
        ellipsis: false,
        customRender: ({ value, record }) => `${value || '0'}${record.saleUnit || ''}`,
      },

      {
        title: '操作人',
        dataIndex: 'employeesName',
        ellipsis: false,
      },
      {
        title: '操作时间',
        dataIndex: 'addTime',
        ellipsis: false,
        width: 190,
      },
    ],
    useSearchForm: true,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'id',
  });
</script>
<style lang="less" scoped>
  .card {
    padding: 12px;
  }
</style>
